<template>
  <el-aside class="layout-aside">
    <div class="logoBox">
      <img src="../../assets/images/logo.jpg"/>
    </div>
    <el-menu text-color="#c0c4cc" active-text-color="#fff"
             default-active="2" class="el-menu-vertical-demo"
             @open="handleOpen" @close="handleClose" router>
      <template v-for="item in menuData" :key="item.meta.pageId">
        <!--
            这里没有做处理子菜单的情况
         -->
        <el-sub-menu v-if="item.meta.children" :index="item.path">
          <template #title>
            <el-icon>
              <icon-menu/>
            </el-icon>
            <span>{{ item.pageName }}</span>
          </template>
          <el-menu-item v-for="level in item.pages" :key="level.pageId" :index="level.pageId">
            <el-icon>
              <icon-menu/>
            </el-icon>
            <span>{{ level.pageName }}</span>
          </el-menu-item>
        </el-sub-menu>
        <el-menu-item v-else :index="item.path">
          <el-icon>
            <setting/>
          </el-icon>
          <span>{{ item.meta.name }}</span>
        </el-menu-item>
      </template>

    </el-menu>

  </el-aside>

</template>
<script setup>
import {Menu as IconMenu, Setting} from '@element-plus/icons-vue'
import {routes} from '@/router/index.js'

const menuData = routes;

const handleOpen = (key, keyPath) => {
  console.log(key, keyPath)
}
const handleClose = (key, keyPath) => {
  console.log(key, keyPath)
}
</script>

<style scoped>
.logoBox {
  height: 65px;
  text-align: center;
  vertical-align: middle;
}

.logoBox > img {
  max-height: 65px;
}

/*
  侧边栏样式
*/
.layout-aside {
  background-color: #333A4B;
  width: 200px;
  height: 100vh;
}

.layout-aside::-webkit-scrollbar {
  display: none; /* 隐藏滚动条 */
}

/*
  menu 去除右边框
*/
.el-menu-vertical-demo {
  border-right: none !important;
}

.el-menu-item.is-active {
  border-left: 3px solid #0486fe;
  background-color: #263246;
}

:deep(.el-sub-menu__title) {
  background-color: #333A4B;
  height: 44px;
}

:deep(.el-menu-item) {
  background-color: #333A4B !important;
  height: 44px;
}

:deep(.el-menu-item:hover,.el-sub-menu__title:hover) {
  background-color: #475060 !important;
}
</style>